<!--
 * @Author: coocase
 * @Date: 2021-03-13 18:24:27
 * @LastEditTime: 2021-06-11 12:20:59
 * @LastEditors: coocase
 * @Description: 
 * @FilePath: \git\dami\src\components\search.vue
-->
<template>
    <div class="search-wrap">
        <Row class="search-row">
            <Col span="8" class="search-left">
                <Icon
                    class="search-logo"
                    type="md-basket"
                    color="#ff1268"
                    size="100"
                    @click="goTo"
                />
                <Dropdown
                    class="search-drop"
                    trigger="click"
                    style="margin-left: 20px"
                >
                    <a href="javascript:void(0)">
                        北京
                        <Icon type="ios-arrow-down"></Icon>
                    </a>
                    <DropdownMenu slot="list">
                        <DropdownItem>上海</DropdownItem>
                        <DropdownItem>广州</DropdownItem>
                    </DropdownMenu>
                </Dropdown>
            </Col>
            <Col span="16">
                <Input
                    class="search"
                    search
                    enter-button="搜索"
                    size="large"
                    placeholder="Enter something..."
                    @on-search="goResult"
                    v-model="words"
                />
            </Col>
        </Row>
    </div>
</template>

<script>
export default {
    name: "Search",
    data() {
        return {
            words: "",
            path: "/result",
        };
    },
    beforeCreate: function () {
        var timer = setInterval(() => {
            if(document.readyState == 'complete'){
                 this.$Spin.hide();
                clearInterval(timer)
            }
        }, 100);
    },
    created: function () {   
    },
    mounted: function () {
    },
    beforeUpdate: function () {   
    },
    updated:function () {         
    },
    methods: {
        goTo: function () {
            var path = this.$route.path;
            //当路径不是根目录，且不包含index时才跳转主页
            if (path != "/" && path.search("index") == -1) {
                this.$router.push({ name: "Index" });
            }
        },
        getResults: function (str) {
            this.$http
                .getRequest({
                    api: "results",
                    data: { str },
                })
                .then((res) => {
                    this.$emit("getResults", res);
                    //获取数据再跳转，否则第一次渲染不出数据
                    this.$Notice.success({
                        title: "搜索成功",
                        duration: 0.75,
                    });
                    //传入w值为str的参数
                    this.$router.push({ name: "ResultTo", params: { w: str } });
                    //   console.log(res);
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        goResult: function () {
            var words = this.words;
            this.path = "/result/" + words;
            // console.log(words);
            // console.log(this.path);
            // console.log(this.$route.path);
            // 当前搜索词和 将要搜索的词做对比，一样则不跳转
            if (words == "") {
                this.$Notice.warning({
                    title: "不能为空",
                    duration: 2,
                });
            } else if (this.path != this.$route.path) {
                this.getResults(words);
            } else {
                this.$Notice.warning({
                    title: "已经在这个页面了",
                    duration: 2,
                });
            }
        },
    },
};
</script>

<style scoped]>
.search-wrap {
    margin: 20px 0;
}
.search-wrap .search-left {
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;
    padding-right: 150px;
}
.search-row {
    display: flex;
    justify-content: space-between;
}
.search {
    display: inline-block;
    width: 700px;
    margin: 20px 0 64px;
}
.ivu-input-group .ivu-input {
    width: 80%;
    border-color: #ff1268;
}
.search-drop {
    align-self: flex-start;
    margin-top: 20px;
    font-size: 16px;
}
.search-logo:hover {
    cursor: pointer;
}
</style>